<script lang="ts" setup>
import { reactive } from 'vue';
interface List { index: number; context: string };
const serial = reactive({
  list: new Array(5).fill({ index: 0, context: '' })
})
const onSpeak = (data: List) => {
  console.log(data)
}
</script>

<template>
  <div class="home-container serial-number-container pl8 pr8 pb8">
    <div class="flex-ali mt8" v-for="(data, key) in serial.list">
      <span class="font12">序号：</span>
      <el-input-number style="width: 82px" v-model="serial.list[key].index" :min="0" size="small" controls-position="right"
        placeholder="请输入序号" />
      <span class="font12 ml8">内容：</span>
      <el-input v-model="serial.list[key].context" class="flex-auto" size="small" placeholder="请输入发言内容" />
      <el-button size="small" type="primary" class="ml8" @click="onSpeak(data)">发言</el-button>
    </div>
    <div class="flex-ali flex-jct pt8 label">注：如果不选序号默认随机账号</div>
  </div>
</template>

<style lang="scss" scoped>
.serial-number-container {
  .label{
    color: #f58319;
  }
}
</style>